import 'package:flutter/material.dart';
import 'package:flutter_getx_cms/utils/size_extension.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'logic.dart';

class GetLoginPage extends StatelessWidget {
  GetLoginPage({Key? key}) : super(key: key);

  /// 使用Get.put()实例化你的类，使其对当下的所有子路由可用。
  final logic = Get.put(GetLoginLogic());

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () async {
          // 禁止返回
          return false;
        },
        child: Scaffold(
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                children: [
                  200.heightSizedBox,
                  _buildPageTitle(),
                  24.heightSizedBox,
                  _buildFormField('账号', _buildAccountTextField()),
                  20.heightSizedBox,
                  _buildFormField('密码', _buildPasswordTextField()),
                  20.heightSizedBox,
                  _buildLoginButton()
                ],
              ),
            ),
          ),
        ));
  }

  _buildPageTitle() {
    return Column(
      children: [
        TDText(
          "CMS系统".tr,
          style: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w600,
            fontSize: 18,
          ),
        ),
      ],
    );
  }

  // 构建表单字段
  Widget _buildFormField(String title, Widget field) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(title),
        12.heightSizedBox,
        field,
      ],
    );
  }

  // 构建账号输入框
  Widget _buildAccountTextField() {
    return Container(
      height: 36,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(2)),
        border: Border.all(color: Colors.grey, width: 0.5),
      ),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              style: const TextStyle(fontSize: 12),
              controller: logic.accountTextEditController,
              decoration: const InputDecoration(
                hintText: '请输入账号',
                hintStyle: TextStyle(fontSize: 12, color: Color(0x99999999)),
                border: OutlineInputBorder(borderSide: BorderSide.none),
                isDense: true,
                contentPadding: EdgeInsets.only(left: 16),
              ),
            ),
          )
        ],
      ),
    );
  }

  // 构建密码输入框
  Widget _buildPasswordTextField() {
    return Obx(
      () => Container(
        height: 36,
        width: double.infinity,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(2)),
          border: Border.all(
            color: logic.pwdEntering.value ? Colors.red : Colors.grey,
            width: 0.5,
          ),
        ),
        child: Row(
          children: [
            Expanded(
              child: TextField(
                style: const TextStyle(fontSize: 12),
                obscureText: !logic.showPassword.value,
                focusNode: logic.focusNode,
                controller: logic.passwordTextEditController,
                decoration: InputDecoration(
                  hintText: '请输入密码',
                  hintStyle:
                      const TextStyle(fontSize: 12, color: Color(0x99999999)),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(2),
                    borderSide: BorderSide.none,
                  ),
                  contentPadding: const EdgeInsets.only(left: 16),
                ),
              ),
            ),
            GestureDetector(
              onTap: logic.switchVisibility,
              child: Icon(
                logic.showPassword.value
                    ? Icons.visibility_outlined
                    : Icons.visibility_off_outlined,
                size: 20,
                color: Colors.grey,
              ),
            ),
            12.widthSizedBox,
          ],
        ),
      ),
    );
  }

  // 构建登录按钮
  Widget _buildLoginButton() {
    return TDButton(
      text: '登录',
      theme: TDButtonTheme.primary,
      width: 400,
      onTap: logic.login,
    );
  }
}
